<script setup lang="ts">
    import { ArticleItem } from '@/services/type';
    import { ref, reactive, onMounted, computed } from 'vue';
    import { api } from '@/services/api';
    import moment from 'moment';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { useUserStore } from '@/stores/user';

    const userStore = useUserStore();

    // 属性
    const { yhnm } = defineProps<{yhnm: string}>();

    // 博客列表
    const articleData = reactive<ArticleItem[]>([]);
    // 初始化加载中
    const loading = ref(true);
    // 是否最后一页
    const isLast = ref(false);
    // 游标值
    const cursor = ref('');
    // 加载参数
    const loadMoreParam = reactive({
        loadName: "点击加载更多",
        loading: false,
        disabled: false
    });

    // 是否当前用户
    const isCurrentUser = computed(() => userStore.userInfo.yhnm === yhnm);

    // 获取用户收藏列表信息
    const getCollectArticleList = async() => {
        // 调用用户收藏列表信息接口
        const response = await api.article.getCollectArticleList({
            // 用户内码
            yhnm,
            // 游标值
            cursor: cursor.value,
            // 分页数量
            pageSize: 10
        });
        if(response.code === 0) {
             // 结果赋值
            articleData.push(...response.data.list);
            // 是否最后一页
            isLast.value = response.data.isLast;
            // 游标值
            cursor.value = response.data.cursor;
            // 如果是最后一页
            if(isLast.value) {
                loadMoreParam.loadName = "已经到底了";
                loadMoreParam.disabled = true;
            }
            loadMoreParam.loading = false;
        }
    }

    // 取消收藏
    const cancelCollect = (wznm: string) => {
        ElMessageBox.confirm(
            '确定是否取消收藏？',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(async () => {
            const response = await api.article.collect({
                // 文章内码
                wznm,
                // 是否收藏，默认 取消收藏
                isCollect: false
            });
            if(response.code === 0) {
                ElMessage.success("取消收藏成功");
                // 获取当前收藏文章信息下标
                const index: number = articleData.findIndex((item) => item.wznm === wznm);
                if(index >= 0) {
                    // 从用户收藏列表中移除
                    articleData.splice(index, 1);
                }
            }
        }).catch(() => {
            
        });
    }

    onMounted(async () => {
        // 初始化数据
        await getCollectArticleList();
        // 初始化加载结束
        loading.value = false;
    });

</script>
<template>
    <el-skeleton :loading="loading" :rows="3" animated>
        <template #template>
            <ul class="article-data">
                <li v-for="index in 2" :key="index">
                    <div class="article-img">
                        <el-skeleton-item variant="image" style="width: 200px; height: 135px" />
                    </div>
                    <div class="blog-text" style="width: 100%;height: 100%;">
                        <el-skeleton-item variant="h1" style="width: 40%" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="text" style="width: 10%" />
                    </div>
                </li>
            </ul>
        </template>
        <template #default>
            <div class="nodata" v-if="articleData.length == 0">
                <svg-icon href='#icon-nodata' width="250px" height="250px"></svg-icon>
                <br/>
                <span style='color: darkcyan;'>-暂无收藏-</span>
            </div>
            <ul class="article-data" v-if="articleData.length != 0">
                <li v-for="(item, index) in articleData" :key="index">
                    <div class="article-img">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="blog-text">
                        <div class="blog-title">
                            <h3 style="width: 320px;"><a class="block-fea" href="" :title="item.title">{{ item.title }}</a></h3>
                            <el-popover
                                v-if="isCurrentUser"
                                placement="bottom-start"
                                trigger="click"
                                :open-delay="500"
                                :offset="10"
                                :width="85"
                            >
                                <ul class="more-ul">
                                    <li class="more-li-item">
                                        <a class="more-delete" @click="cancelCollect(item.wznm)">
                                            <span>取消收藏</span>
                                        </a>
                                    </li>
                                </ul>
                                <template #reference>
                                    <svg-icon href='#icon-more-erect' width="1.5em" height="1.5em" class="more-collect-icon"></svg-icon>
                                </template>
                            </el-popover>
                            
                        </div>
                        <div class="blog-label">
                            <el-tag style="margin-right: 10px;"><i class="el-icon-folder-opened"></i>&nbsp;{{item.columnName}}</el-tag>
                            <el-tag v-for="(label, index) in item.label" :key="index" type="info" style="margin-right: 10px;">#&nbsp;{{ label }}</el-tag>
                        </div>
                        <p class="blog-describe">
                            {{item.description}}    
                        </p>
                        <aside class="item-meta">
                            <div class="item item-meta-user">
                                <!-- 个人信息名片 -->
                                <user-card :yhnm="item.auther_user_info.yhnm">
                                    <a>
                                        <img src="@/assets/image/user-icon.jpg" />
                                        {{item.auther_user_info.nickName}}
                                    </a>
                                </user-card>
                                <span class="point"></span>
                                <span class="time">{{ moment(item.releaseTime).startOf('minute').fromNow() }}</span>
                            </div>
                            <div class="item item-meta-view">
                                <el-icon><View /></el-icon>{{item.hits}}
                            </div>
                            <div class="item item-meta-comment">
                                <el-icon><ChatDotSquare /></el-icon>{{item.postNum}}
                            </div>
                            <div class="item item-meta-collection">
                                <el-icon><Star /></el-icon>0
                            </div>
                        </aside>
                    </div>
                </li>
            </ul>
            <div class="load-more" v-if="articleData.length != 0">
                <el-button type="primary" 
                    :loading="loadMoreParam.loading" 
                    style="margin-top: 15px;width: 150px;"
                    :disabled="loadMoreParam.disabled"
                >
                    {{loadMoreParam.loadName}}
                </el-button>
            </div>
        </template>
    </el-skeleton>
</template>
<style lang="css" scoped>
    .more-collect-icon {
        margin-left: 20px;
        margin-top: 2px;
        cursor: pointer;
        color: rgb(121, 124, 128);
    }
    .more-collect-icon:hover {
        cursor: pointer;
        color: deepskyblue!important;
    }
</style>